<template>
<keep-alive>
    <div id="ceshi">
        <van-list
        class="box"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <van-cell
            v-for="item in list"
            :key="item"
            :title="item"
  />
</van-list>
    </div>
    </keep-alive>
</template>

<script>
    import { List,Cell } from 'vant'
export default {
    data() {
        return {
        list: [],
        loading: false,
        finished: false
        };
    },
    components:{
        [List.name]:List,
        [Cell.name]:Cell,
    },
    methods: {
        onLoad() {
            setTimeout(() => {
            for (let i = 0; i < 5; i++) {
            this.list.push(this.list.length + 1);
            }
            // 加载状态结束
            this.loading = false;

            // 数据全部加载完成
            if (this.list.length >= 40) {
                this.finished = true;
            }
             }, 1000);
      }
    }
}
</script>

<style scoped lang='less'>
  #ceshi{
      width: 100%;
      .box{
          height: 100px;
          width: 100%;
      }
  }
</style>
